// pages/video/video.js
import request from "../../utils/request"
let offset=0//视频页码值

Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList:[],//导航标签列表
    navId:null,//导航标签id
    videoList:[],//视频列表
    videoId:'',//视频id
    videoUrl:'',//视频地址
    videoUpdateTime:[],//视频的播放时长
    isTriggered:false,//是否开启下拉刷新
    flag:false, //节流阀
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getVideoGroupList()
  },
  // 获取导航数据
  async getVideoGroupList(){
    let result = await request('/video/group/list')
    this.setData({
      // 坑：splice会修改原数组，而导致无法获取到正确id无法取到
      videoGroupList:result.data.slice(0,14),
      navId:result.data[0].id*1
    })
     // 获取标签视频数据
     this.getVideoList(this.data.navId)
  }, 
  // 获取标签视频数据
  async getVideoList(navId){
    if(!navId) return
    this.setData({
      flag:true,//开启节流阀
    })
    let {videoList} = this.data
    let result = await request('/video/group',{id:navId,offset:offset++})
    videoList.push(...result.datas)
    this.setData({
      videoList,
      isTriggered:false,
      flag:false,//关闭节流阀
    })

    // 关闭loading
    wx.hideLoading()
    // 获取视频播放URL地址
    this.getVideoUrl()
  },
   // 获取视频播放URL地址
   getVideoUrl(){
    this.data.videoList.forEach(async(item,index)=>{
      let videoUrl = await request('/video/url',{id:item.data.vid})
    this.setData({
      [`videoList[${index}].videoUrl`]:videoUrl.urls[0].url
    })
    })
  },
  // 点击切换导航的id
  changeNav(event){
    let navId = event.currentTarget.id
    offset=0//修改视频页码值为0
    this.setData({
      navId:navId*1,
      videoList:[]
    })
    wx.showLoading({
      title:'正在加载数据！'
    })
    // 动态获取标签视频数据
    this.getVideoList(this.data.navId)
  },
  // 点击开始播放/继续播放
handlePlay(event){
    /*
    // 解决多个视频同时播放的问题
    1,再点击播放的事件中需要找到上一个播放的视频
    2，在播放新的视频之前关闭上一个正在播放的视频
    关键：
    1，如何找到上一个视频的实例对象
    2，如何确认点击播放的视频和正在播放的视频不是同一个
    单例模式：
    1，需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象
    2，节省内存空间
    */
    let vid = event.currentTarget.id;
    // 关闭上一个视频
    // this.vid !== vid && this.videoContext && this.videoContext.stop()
    // 给vid重新赋值
    // this.vid = vid;
    // 更新data中videoId
    this.setData({
      videoId:vid
    })
    // 创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid)
    // 判断当前的视频之前是否播放过，是否有播放记录，如果有，跳转指定位置
    let {videoUpdateTime} = this.data
    let videoItem = videoUpdateTime.find(item=>item.vid === vid)
    if(videoItem){
      this.videoContext.seek(videoItem.currentTime)
    }
    // 播放视频
    this.videoContext.play()
  },
//  监听视频播放进度的回调
handleTimeUpdate(event) {
  let videoTimeObj = {vid:event.currentTarget.id,currentTime:event.detail.currentTime}
  let {videoUpdateTime} = this.data
  /*
  思路：判断记录播放时长的videoUpdateTime数组中是否有当前视频
  1，如果有，在原来的播放记录中修改
  2，没有的话直接添加
  */
 let videoItem = videoUpdateTime.find(item=>item.vid === videoTimeObj.vid)
 if(videoItem){
   videoItem.currentTime = event.detail.currentTime
 }else {
   videoUpdateTime.push(videoTimeObj)
 }
 this.setData({
   videoUpdateTime
 })
},
// 视频播放结束
handleEnded(event){
  let {videoUpdateTime} = this.data
  videoUpdateTime.splice(videoUpdateTime.findIndex(item=>item.vid === event.currentTarget.id),1)
  this.setData({
    videoUpdateTime
  })
},
// 下拉刷新
handleRefresherrefresh(){
  this.setData({
    isTriggered:true
  })
  this.getVideoList(this.data.navId)
},
// 上拉触底加载数据
headleScrolltolower(){
  // 通过flag判断上一页视频是否加载完成
  if(!this.data.flag){
    this.getVideoList(this.data.navId)
  }
},
goSearch(){
  wx.navigateTo({
    url: '/pages/search/search',
  })
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({from}) {
    if(from == "button"){
      return {
        title:"button转发",
        path:"/pages/video/video",
        // imageUrl:''
      }
    }else{
      return {
        title:"menu转发",
        path:"/pages/video/video",
        imageUrl:'/static/images/favicon.ico'
      }
    }
  }
})